<template>
  <el-dialog title="新增退换货记录" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false"
    :modal-append-to-body="false" v-drag2anywhere>
    <div>
      <el-form :model="filterData" size="mini">
        <el-row :gutter="20">
          <el-col style="width: 180px;">
            <el-form-item>
              <el-input v-model="filterData.reqcode" placeholder="付款单号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 180px;">
            <el-form-item>
              <el-input v-model="filterData.title" placeholder="商品名称" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col style="width: 180px;">
            <el-form-item>
              <el-input v-model="filterData.model" placeholder="规格型号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 180px;">
            <el-form-item>
              <el-input v-model="filterData.seller" placeholder="销售单位" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 180px;">
            <el-form-item>
              <el-input v-model="filterData.buyer" placeholder="采购单位" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 180px;">
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="handleFilterData">开始搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <div style="height:35px;line-height: 35px; text-align: right;"><span style="color:#FF0000">提示: 如果退换货类型不一致，请分开单独申请。</span></div>
      <div style="height:200px; overflow-y: auto;">
        <el-table :data="tableData" ref="filterTable" border empty-text="结果为空" height="100%" @select="handleSelection" >
          <el-table-column type="selection" width="50px" align="center"></el-table-column>
           <el-table-column label="付款单号" prop="reqcode" width="120px"></el-table-column>
           <el-table-column label="销售单位名称" prop="seller" show-overflow-tooltip></el-table-column>
          <el-table-column label="商品名称" prop="title" show-overflow-tooltip></el-table-column>
          <el-table-column label="规格型号" prop="model" show-overflow-tooltip></el-table-column>
          <el-table-column label="品牌" prop="brand"  width="60" show-overflow-tooltip></el-table-column>
          <el-table-column label="单位" prop="unit" width="50px" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="数量" prop="count" width="80px" align="center" ></el-table-column>
          <el-table-column label="单价" prop="price" width="85px" align="center"></el-table-column>
          <el-table-column label="总价" prop="total" width="85px" align="center"></el-table-column>
          <el-table-column label="发票" align="center"  width="120px" show-overflow-tooltip>
            <template v-slot="scope">
              {{scope.row.tickettype}}
            </template>
          </el-table-column>
          <el-table-column label="运费" prop="yunfei" width="85" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="采购单位名称" prop="buyer" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
      <div style="display: flex; margin-top: 5px;">
          <div style="flex: 1;line-height: 30px;">选中总额:{{sum_selection.toFixed(2)}}</div>
          <el-pagination class="pagination" prev-text="上一页" next-text="下一页" layout=" prev, pager, next,sizes,total"
            :page-sizes="[10, 20, 30]" :total="numrows" :page-size="pagesize" :current-page="curpage"
            @size-change="handleSizeChange" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
    </div>

    <div>
      <el-divider content-position="left">退款设置</el-divider>
      <el-form :model="formData" ref="form1" label-width="100px" :rules="rules" :disabled="selectrow==null">
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="付款单号:">
              {{formData.reqcode}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="退款类型:" prop="type">
              <el-select v-model="formData.type" placeholder="请选择类型">
                <el-option label="仅退款" value="1"></el-option>
                <el-option label="仅退货" value="2"></el-option>
                <el-option label="退款退货" value="3"></el-option>
                <el-option label="换货" value="4"></el-option>
                <el-option label="优惠返点" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="退款金额:"  prop="amount">
              <el-input-number v-model="formData.amount" :precision="2" :min="0" :max="sum_selection" style="width:100%"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="退款状态:" prop="status">
              <el-select v-model="formData.status" placeholder="请选择状态">
                <el-option label="退款中" value="0"></el-option>
                <el-option label="已完成" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="18">
            <el-form-item label="备注信息:" prop="memo">
             <el-input type="textarea" v-model="formData.memo" placeholder="退款备注" :rows="3"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际退款日期:" prop="done_date">
              <el-date-picker v-model="formData.done_date" value-format="yyyy-MM-dd" type="date" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button size="medium">取消</el-button>
      <el-button type="primary" size="medium" @click="handleSave" :disabled="selectrow==null">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        index: -1,
        filterData: {
          reqcode: '',
          title: '',
          model: '',
          seller: '',
          buyer:'',
          requester:'',

        },
        formData:{
          reqcode:'',
          type:'',
          amount:0,
          status:'0',
          done_date:'',
          tickettype:'',
          ticketrate:'',
          memo:''
        },
        max_amount:0,
        selectrow:null,
        sum_selection:0,
        numrows: 0,
        tableData: [],
        curpage: 1,
        pagesize: 15,
        dialogVisible: false,
        rules:{
          type:[{required:true,message:"请选择退款类型",trigger:'change'}],
          status:[{required:true,message:"请选择退款状态",trigger:'change'}],
        }
      }
    },
    methods: {
      handleSelection(list,row){
        this.selectrow=row;
        if(list.length==0){
          this.selectrow=null;
        }
         if(list.length>1){
            let  del_row=list.shift();
            this.$refs.filterTable.toggleRowSelection(del_row,false);
         }
         this.sum_selection=this.selectrow? parseFloat(this.selectrow.total):0;
         this.formData.reqcode=this.selectrow? this.selectrow.reqcode:"";
         this.formData.tickettype=this.selectrow? this.selectrow.tickettype:"";
         this.formData.ticketrate=this.selectrow? this.selectrow.ticketrate:"";
         this.max_amount=this.sum_selection;
         this.formData.amount=this.max_amount;
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      init() {
        this.selectrow=null;
        this.loadFilterData();
      },
      handleFilterData() {
        this.curpage = 1;
        this.loadFilterData();
      },
      loadFilterData() {
        const params = {
          curpage: this.curpage,
          pagesize: this.pagesize,
          reqcode: this.filterData.reqcode,
          title: this.filterData.title,
          model: this.filterData.model,
          seller:this.filterData.seller,
          buyer:this.filterData.buyer,
        }

        this.axios.post("api/admin/buydetail/popuplist", params).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.tableData = res.data.list;
            this.numrows = res.data.numrows;
          }
        })
      },
      handleSave(){
        if(this.formData.reqcode==""){
          this.$message.error("请选择需要退款的明细！");
          return;
        }
          this.$refs.form1.validate(ok=>{
             if(ok){
                const params={
                  buyer:this.selectrow.buyer,
                  seller:this.selectrow.seller,
                  buycode:this.selectrow.reqcode,
                  buyid:this.selectrow.id,
                  buydid:parseInt(this.selectrow.did),
                  type:this.formData.type,
                  total:this.selectrow.total,
                  amount:parseFloat(this.formData.amount),
                  status:this.formData.status,
                  memo:this.formData.memo,
                  done_date:this.formData.done_date,
                  count:this.selectrow.count,
                  tickettype:this.formData.tickettype,
                  ticketrate:this.formData.ticketrate,
                  supname:this.selectrow.supname,
                  yunfei:this.selectrow.yunfei,
                  price:this.selectrow.price,
                  total:this.selectrow.total,
                  title:this.selectrow.title,
                  rate:this.selectrow.rate,
                  model:this.selectrow.model,
                  unit:this.selectrow.unit,
                  brand:this.selectrow.brand
                }
                this.axios.post("api/admin/buyexchange/create",params).then(res=>{
                  if(res.status==200 && res.data.code==1){
                     this.$message.success({message:res.data.msg,duration:1500,showClose:true});
                     this.dialogVisible=false;
                     this.$emit("complete");
                  }else{
                    this.$message.error({message:res.data.msg,duration:1500,showClose:true});
                  }
                })
             }
          })
      }
    }
  }
</script>

<style>
</style>
